<template>
	<view class="width-100">
		<view class="serviceList">
			<view class="title">工业服务</view>
			<view class="iconList">
				<block v-for="(item, index) in fetchs">
					<view @click="goToDatail(item)" v-if="index < 9">
						<!-- icon图标 -->
						<image :src="item.icon || 'http://106.14.56.171:15016/images/serviceicon/u778.png'" mode="">
						</image>
						<!-- 服务类型名称 -->
						<view class="iconListText">
							<text>{{ item.serviceName }}</text>
						</view>
					</view>
				</block>
			</view>
			<view style="width: 100%;height: 20rpx;"></view>
		</view>

		<view class="serviceList">
			<view class="title">工业材料</view>
			<view class="iconList">
				<block v-for="(item, index) in typeServe">
					<view @click="goToMaterial(item)">
						<!-- icon图标 -->
						<image :src="item.icon || 'http://106.14.56.171:15016/images/serviceicon/u778.png'" mode="" />
						<view class="iconListText">
							<!-- 服务类型名称 -->
							<text>{{ item.valueName }}</text>
						</view>
					</view>
				</block>
			</view>
			<view style="width: 100%;height: 20rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetchs: [], //获取设备维修服务类型
				typeServe: [] //获取材料服务类型
			};
		},
		onPullDownRefresh() {
			this.fetchEquipment(); //获取设备维修服务类型
			this.materialTypeServe(); //获取材料服务类型
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			var _that = this
			uni.getNetworkType({
				success: function(res) {
					console.log(res.networkType); //网络类型 wifi、2g、3g、4g、ethernet、unknown、none
					if (res.networkType === "none") {
						console.log("当前无网络");
						_that.fetchEquipment(); //获取设备维修服务类型
						_that.materialTypeServe(); //获取材料服务类型
					} else {
						console.log("有网络");
						if (res.errMsg == 'getNetworkType:ok') {
							_that.fetchEquipment(); //获取设备维修服务类型
							_that.materialTypeServe(); //获取材料服务类型
						}
					}
				}
			});
		},
		methods: {
			// 获取设备维修服务类型
			fetchEquipment() {
				this.$http.get('api/ProjectTypeSerivce/GetServiceTypeList').then(res => {
					// console.log('获取设备维修服务类型', res);
					// res.sort((a,b) => {
					// 	// 排序,按字母循序
					// 	return a.serviceName.localeCompare(b.serviceName)
					// })
					this.fetchs = res;
				});
			},
			//获取工业材料服务类型
			materialTypeServe() {
				this.$http.get('api/Materials/GetMaterialServiceTypes').then(res => {
					// console.log('获取工业材料服务类型', res);
					this.typeServe = res;
					// console.log('5555484888', this.typeServe);
				});
			},

			// 跳转到工业服务详情页面
			goToDatail(item) {
				uni.navigateTo({
					url: './service_detail/service_detail?item=' + JSON.stringify(item) + '&name=' + item
						.serviceName
				});
			},
			// 跳转到工业材料
			goToMaterial(item) {
				uni.navigateTo({
					url: './../material/index?type=' + item.valueName
				});
			},
			network() {
				this.$refs.popup.open('cneter')
			},
			cancel() {
				this.$refs.popup.close('cneter')
			},
			networkSure() {
				this.fetchEquipment(); //获取设备维修服务类型
				this.materialTypeServe(); //获取材料服务类型
				this.$refs.popup.close('cneter')
			}
		}
	};
</script>

<style lang="less" scoped>
	.width-100 {
		background-size: 100%;
		height: 100%; //立即看效果的可以设置宽高，用内容填充的就不需要
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.serviceList {
		background-color: #fff;
		border-radius: 20rpx;
		width: 96%;
		margin-left: 2%;
		margin-top: 2%;
	}

	.title {
		padding-top: 25rpx;
		padding-left: 30rpx;
	}

	.iconList {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-wrap: wrap;
		border-radius: 25rpx;
		width: 96%;
		margin-left: 2%;
		margin-top: 1%;
		font-size: 22rpx;


		>view {
			width: 20%;
			height: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			>image {
				width: 75rpx;
				height: 75rpx;
				margin-top: 25rpx;
			}
			.iconListText {
				text-align: center;
				width: 120rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
	
</style>
